/**
 * 仪表盘页面JavaScript功能
 */

// DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 初始化页面加载动画
    initPageLoader();
    
    // 初始化图表
    initCharts();
    
    // 初始化搜索功能
    initSearch();
    
    // 初始化实时数据更新
    initRealTimeData();
});

/**
 * 初始化页面加载动画
 */
function initPageLoader() {
    const loader = document.querySelector('.page-loader');
    
    // 页面加载完成后，淡出加载动画
    window.addEventListener('load', function() {
        setTimeout(() => {
            loader.style.opacity = '0';
            setTimeout(() => {
                loader.style.display = 'none';
            }, 500);
        }, 500);
    });
}

/**
 * 初始化图表
 */
function initCharts() {
    // 用户增长趋势图表
    const userChartCtx = document.getElementById('userChart').getContext('2d');
    new Chart(userChartCtx, {
        type: 'line',
        data: {
            labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            datasets: [{
                label: '新增用户',
                data: [65, 59, 80, 81, 56, 55, 40],
                fill: false,
                borderColor: '#2196f3',
                tension: 0.1
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: '最近7天用户增长趋势'
                }
            }
        }
    });

    // 支教需求分布图表
    const demandChartCtx = document.getElementById('demandChart').getContext('2d');
    new Chart(demandChartCtx, {
        type: 'doughnut',
        data: {
            labels: ['语文', '数学', '英语', '科学', '音乐', '美术'],
            datasets: [{
                data: [30, 25, 20, 15, 5, 5],
                backgroundColor: [
                    '#2196f3',
                    '#4caf50',
                    '#ffc107',
                    '#e91e63',
                    '#9c27b0',
                    '#00bcd4'
                ]
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'right',
                },
                title: {
                    display: true,
                    text: '支教需求学科分布'
                }
            }
        }
    });
}

/**
 * 初始化搜索功能
 */
function initSearch() {
    const searchInput = document.getElementById('admin-search-input');
    searchInput.addEventListener('input', function(e) {
        const searchTerm = e.target.value.toLowerCase();
        
        // 在表格中搜索
        const tableRows = document.querySelectorAll('.admin-table tbody tr');
        tableRows.forEach(row => {
            const text = row.textContent.toLowerCase();
            row.style.display = text.includes(searchTerm) ? '' : 'none';
        });
        
        // 在用户列表中搜索
        const userItems = document.querySelectorAll('.user-item');
        userItems.forEach(item => {
            const text = item.textContent.toLowerCase();
            item.style.display = text.includes(searchTerm) ? '' : 'none';
        });
    });
}

/**
 * 初始化实时数据更新
 */
function initRealTimeData() {
    // 模拟实时数据更新
    setInterval(() => {
        // 更新统计卡片数据
        updateStatCards();
        
        // 更新图表数据
        updateCharts();
    }, 5000);
}

/**
 * 更新统计卡片数据
 */
function updateStatCards() {
    const statValues = document.querySelectorAll('.stat-value');
    statValues.forEach(value => {
        // 生成随机增减值
        const change = Math.floor(Math.random() * 10) - 5;
        const currentValue = parseInt(value.textContent.replace(/,/g, ''));
        const newValue = currentValue + change;
        
        // 添加动画效果
        value.classList.add('animate__animated', 'animate__pulse');
        value.textContent = newValue.toLocaleString();
        
        // 移除动画类
        setTimeout(() => {
            value.classList.remove('animate__animated', 'animate__pulse');
        }, 1000);
    });
}

/**
 * 更新图表数据
 */
function updateCharts() {
    // 获取图表实例
    const charts = Chart.instances;
    
    // 遍历所有图表实例并更新数据
    Object.values(charts).forEach(chart => {
        // 根据图表类型更新不同的数据
        if (chart.config.type === 'line') {
            // 更新线图数据 - 随机波动
            const data = chart.data.datasets[0].data;
            chart.data.datasets[0].data = data.map(value => {
                // 生成-5到5之间的随机波动
                const change = Math.floor(Math.random() * 10) - 5;
                return Math.max(0, value + change); // 确保值不小于0
            });
        } else if (chart.config.type === 'doughnut') {
            // 更新饼图数据 - 小幅度随机变化
            const data = chart.data.datasets[0].data;
            chart.data.datasets[0].data = data.map(value => {
                const change = Math.floor(Math.random() * 5) - 2;
                return Math.max(1, value + change); // 确保值至少为1
            });
        }
        
        // 应用更新
        chart.update();
    });
    
    // 更新图表标题，添加时间戳
    const timestamp = new Date().toLocaleTimeString();
    Object.values(charts).forEach(chart => {
        if (chart.options.plugins.title) {
            const originalTitle = chart.options.plugins.title.text.split(' (')[0];
            chart.options.plugins.title.text = `${originalTitle} (更新于: ${timestamp})`;
            chart.update('none'); // 更新标题但不执行动画
        }
    });
}

/**
 * 初始化表格交互功能
 */
function initTableInteractions() {
    // 为表格中的操作按钮添加事件监听
    const actionButtons = document.querySelectorAll('.table-actions .btn-icon');
    
    actionButtons.forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            const action = this.getAttribute('title');
            const row = this.closest('tr');
            const userName = row.querySelector('.user-info span').textContent;
            const demandTitle = row.querySelector('td:nth-child(2)').textContent;
            
            if (action === '查看详情') {
                showApplicationDetail(userName, demandTitle);
            } else if (action === '通过') {
                approveApplication(row, userName, demandTitle);
            } else if (action === '拒绝') {
                rejectApplication(row, userName, demandTitle);
            }
        });
    });
}

/**
 * 显示申请详情
 */
function showApplicationDetail(userName, demandTitle) {
    // 这里可以实现弹窗显示详情或跳转到详情页面
    alert(`查看 ${userName} 的 "${demandTitle}" 申请详情`);
    // 实际项目中应该使用模态框或页面跳转
}

/**
 * 通过申请
 */
function approveApplication(row, userName, demandTitle) {
    if (confirm(`确定通过 ${userName} 的 "${demandTitle}" 申请吗？`)) {
        // 更新状态标签
        const statusBadge = row.querySelector('.status-badge');
        statusBadge.className = 'status-badge status-approved';
        statusBadge.textContent = '已通过';
        
        // 更新操作按钮
        const actions = row.querySelector('.table-actions');
        actions.innerHTML = '<button class="btn-icon" title="查看详情"><i class="bi bi-eye"></i></button>';
        
        // 重新绑定事件
        initTableInteractions();
        
        // 显示通知
        showNotification('申请已通过', 'success');
    }
}

/**
 * 拒绝申请
 */
function rejectApplication(row, userName, demandTitle) {
    const reason = prompt(`请输入拒绝 ${userName} 的 "${demandTitle}" 申请的原因：`);
    
    if (reason !== null) {
        // 更新状态标签
        const statusBadge = row.querySelector('.status-badge');
        statusBadge.className = 'status-badge status-rejected';
        statusBadge.textContent = '已拒绝';
        
        // 更新操作按钮
        const actions = row.querySelector('.table-actions');
        actions.innerHTML = '<button class="btn-icon" title="查看详情"><i class="bi bi-eye"></i></button>';
        
        // 重新绑定事件
        initTableInteractions();
        
        // 显示通知
        showNotification('申请已拒绝', 'warning');
    }
}

/**
 * 显示通知
 */
function showNotification(message, type = 'info') {
    // 创建通知元素
    const notification = document.createElement('div');
    notification.className = `admin-notification ${type}`;
    notification.innerHTML = `
        <div class="notification-content">
            <i class="bi bi-${type === 'success' ? 'check-circle' : type === 'warning' ? 'exclamation-triangle' : 'info-circle'}"></i>
            <span>${message}</span>
        </div>
        <button class="notification-close"><i class="bi bi-x"></i></button>
    `;
    
    // 添加到页面
    document.body.appendChild(notification);
    
    // 添加关闭按钮事件
    notification.querySelector('.notification-close').addEventListener('click', function() {
        notification.classList.add('closing');
        setTimeout(() => {
            notification.remove();
        }, 300);
    });
    
    // 自动关闭
    setTimeout(() => {
        notification.classList.add('closing');
        setTimeout(() => {
            notification.remove();
        }, 300);
    }, 5000);
    
    // 显示动画
    setTimeout(() => {
        notification.classList.add('show');
    }, 10);
}

// 初始化表格交互
document.addEventListener('DOMContentLoaded', function() {
    // 初始化表格交互功能
    initTableInteractions();
    
    // 初始化通知系统
    initNotifications();
});

/**
 * 初始化通知系统
 */
function initNotifications() {
    // 添加通知样式
    const style = document.createElement('style');
    style.textContent = `
        .admin-notification {
            position: fixed;
            top: 20px;
            right: -320px;
            width: 300px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            padding: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 10000;
            transition: right 0.3s ease;
        }
        
        .admin-notification.show {
            right: 20px;
        }
        
        .admin-notification.closing {
            right: -320px;
        }
        
        .admin-notification.success {
            border-left: 4px solid #4caf50;
        }
        
        .admin-notification.warning {
            border-left: 4px solid #ff9800;
        }
        
        .admin-notification.error {
            border-left: 4px solid #f44336;
        }
        
        .admin-notification.info {
            border-left: 4px solid #2196f3;
        }
        
        .notification-content {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .notification-content i {
            font-size: 20px;
        }
        
        .notification-close {
            background: none;
            border: none;
            cursor: pointer;
            color: #999;
            font-size: 16px;
        }
        
        .notification-close:hover {
            color: #333;
        }
    `;
    document.head.appendChild(style);
    
    // 为通知图标添加点击事件
    const notificationIcon = document.querySelector('.admin-notifications');
    if (notificationIcon) {
        notificationIcon.addEventListener('click', function() {
            // 显示通知列表或清除通知徽章
            const badge = this.querySelector('.badge');
            if (badge) {
                badge.style.display = 'none';
                showNotification('所有通知已读', 'info');
            }
        });
    }
}

/**
 * 初始化数据导出功能
 */
function initDataExport() {
    // 获取导出按钮
    const exportButtons = document.querySelectorAll('.btn-export');
    
    exportButtons.forEach(button => {
        button.addEventListener('click', function() {
            const exportType = this.getAttribute('data-type');
            const tableId = this.getAttribute('data-table');
            const table = document.getElementById(tableId);
            
            if (!table) {
                showNotification('找不到要导出的表格', 'error');
                return;
            }
            
            if (exportType === 'csv') {
                exportTableToCSV(table);
            } else if (exportType === 'excel') {
                showNotification('Excel导出功能即将上线', 'info');
            } else if (exportType === 'pdf') {
                showNotification('PDF导出功能即将上线', 'info');
            }
        });
    });
}

/**
 * 将表格导出为CSV文件
 */
function exportTableToCSV(table) {
    const rows = table.querySelectorAll('tr');
    let csv = [];
    
    // 获取表头
    const headers = [];
    const headerCells = rows[0].querySelectorAll('th');
    headerCells.forEach(cell => {
        headers.push('"' + cell.textContent.trim() + '"');
    });
    csv.push(headers.join(','));
    
    // 获取数据行
    for (let i = 1; i < rows.length; i++) {
        const row = [];
        const cells = rows[i].querySelectorAll('td');
        
        cells.forEach(cell => {
            // 移除HTML标签，只保留文本内容
            const text = cell.textContent.trim().replace(/\r?\n/g, ' ');
            row.push('"' + text + '"');
        });
        
        csv.push(row.join(','));
    }
    
    // 创建CSV内容
    const csvContent = csv.join('\n');
    
    // 创建下载链接
    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.setAttribute('href', url);
    link.setAttribute('download', '朋知云学数据导出_' + new Date().toLocaleDateString() + '.csv');
    link.style.display = 'none';
    
    // 添加到页面并触发下载
    document.body.appendChild(link);
    link.click();
    
    // 清理
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
    
    // 显示通知
    showNotification('数据已成功导出为CSV文件', 'success');
}

/**
 * 初始化数据筛选功能
 */
function initDataFilters() {
    // 获取筛选下拉菜单
    const filterSelects = document.querySelectorAll('.data-filter');
    
    filterSelects.forEach(select => {
        select.addEventListener('change', function() {
            const filterType = this.getAttribute('data-filter-type');
            const filterValue = this.value;
            const tableId = this.getAttribute('data-table');
            const table = document.getElementById(tableId);
            
            if (!table) return;
            
            // 获取表格行
            const rows = table.querySelectorAll('tbody tr');
            
            // 应用筛选
            rows.forEach(row => {
                if (filterValue === 'all') {
                    // 显示所有行
                    row.style.display = '';
                } else {
                    // 根据筛选类型获取单元格
                    let cell;
                    if (filterType === 'status') {
                        // 状态筛选 - 查找状态标签
                        cell = row.querySelector('.status-badge');
                    } else if (filterType === 'date') {
                        // 日期筛选 - 查找日期单元格
                        cell = row.querySelector('.date-cell');
                    } else if (filterType === 'category') {
                        // 分类筛选 - 查找分类单元格
                        cell = row.querySelector('.category-cell');
                    }
                    
                    if (cell) {
                        const cellText = cell.textContent.trim().toLowerCase();
                        row.style.display = cellText.includes(filterValue.toLowerCase()) ? '' : 'none';
                    }
                }
            });
            
            // 更新筛选后的行数
            updateFilteredCount(tableId);
        });
    });
}

/**
 * 更新筛选后的行数
 */
function updateFilteredCount(tableId) {
    const table = document.getElementById(tableId);
    if (!table) return;
    
    const rows = table.querySelectorAll('tbody tr');
    const visibleRows = Array.from(rows).filter(row => row.style.display !== 'none');
    
    // 更新计数器
    const counter = document.querySelector(`#${tableId}-counter`);
    if (counter) {
        counter.textContent = `显示 ${visibleRows.length} 条记录，共 ${rows.length} 条`;
    }
}

// 初始化数据导出和筛选功能
document.addEventListener('DOMContentLoaded', function() {
    // 初始化数据导出功能
    initDataExport();
    
    // 初始化数据筛选功能
    initDataFilters();
});